<html> 
 
<head> 
<title>005 | Static particles | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<!--
<script type="text/javascript" src="../lib/glMatrix.js"></script>
<script type="text/javascript" src="../lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="../src/J3D.js"></script>
<script type="text/javascript" src="../src/util/Color.js"></script>
<script type="text/javascript" src="../src/math/Vector2.js"></script>
<script type="text/javascript" src="../src/math/Vector3.js"></script>
<script type="text/javascript" src="../src/math/Matrix44.js"></script>
<script type="text/javascript" src="../src/engine/Engine.js"></script>
<script type="text/javascript" src="../src/engine/Camera.js"></script>
<script type="text/javascript" src="../src/engine/Light.js"></script>
<script type="text/javascript" src="../src/engine/Mesh.js"></script>
<script type="text/javascript" src="../src/engine/Scene.js"></script>
<script type="text/javascript" src="../src/engine/Loader.js"></script>
<script type="text/javascript" src="../src/engine/ShaderAtlas.js"></script>
<script type="text/javascript" src="../src/engine/Texture.js"></script>
<script type="text/javascript" src="../src/engine/Cubemap.js"></script>
<script type="text/javascript" src="../src/engine/Transform.js"></script>
<script type="text/javascript" src="../src/renderers/ShaderSource.js"></script>
<script type="text/javascript" src="../src/renderers/Phong.js"></script>
<script type="text/javascript" src="../src/renderers/Gouraud.js"></script>
<script type="text/javascript" src="../src/renderers/Normal2Color.js"></script>
<script type="text/javascript" src="../src/renderers/Reflective.js"></script>
<script type="text/javascript" src="../src/renderers/Skybox.js"></script>
<script type="text/javascript" src="../src/util/Time.js"></script>
-->

<script type="text/javascript" src="../build/j3d.js"></script>


<script id="particleShader" type="x-shader"> 
	//#name ParticleShader
	//#include CommonInclude
	
	//#vertex
	//#include VertexInclude
	varying vec4 vColor;
	varying float eyeDist;
	
	void main(void) {
		vec4 worldPos = mMatrix * vec4(aVertexPosition, 1.0);
		
		vColor = aVertexColor;
		eyeDist = clamp( distance( uEyePosition, worldPos.xyz ) / 300.0, 0.0, 1.0);
		
		gl_Position = pMatrix * vMatrix * worldPos;
		gl_PointSize = 2.0 * (1.0 - eyeDist);
	}
	
	//#fragment
	uniform vec4 uColor;
	
	varying vec4 vColor;
	varying float eyeDist;
	
	void main(void) {
		gl_FragColor = vec4( uColor.rgb * (1.0 - eyeDist) * vColor.rgb, 1.0 );
	}
</script>

<script>
	var engine, scene, stars, camera;
	var mx = 0, my = 0;

	function init() {
		if(!checkWebGL()) return;
		
		engine = new J3D.Engine();

		camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = 100;	
		engine.camera = camera;	
		engine.scene.add(camera);

		stars = new J3D.Transform();	
		
		var shsrc = document.getElementById("particleShader").firstChild.nodeValue;
		stars.renderer = new J3D.ShaderUtil.parseGLSL(shsrc);
		stars.renderer.drawMode = gl.POINTS;
			
		var a = getParticleAmount();
		stars.geometry = new J3D.Geometry();
		stars.geometry.addArray("aVertexPosition", J3D.ParticleUtil.insideCube(a, 400), 3);
		stars.geometry.addArray("aVertexColor", J3D.ParticleUtil.randomColors(a, 0.5), 4);

		engine.scene.add(stars);

		document.onmousemove = onMouseMove;
		
		draw();
	}

	function onMouseMove(e) {
		mx = ( e.clientX / window.innerWidth  ) * 2 - 1;
		my = ( e.clientY / window.innerHeight ) * 2 - 1;
	}
	
	function getParticleAmount() {
		return parseInt(window.location.hash.substring(1)) || 1000000;
	}
	
	function draw() {
		requestAnimationFrame(draw);
		
		stars.renderer.uColor =  [1 - (mx + 1 / 2), my + 1 / 2, 1, 1];
		
		if (!isNaN(mx) && !isNaN(my)) {
			stars.rotation.x += my * J3D.Time.deltaTime / 1000;
			stars.rotation.y += mx * J3D.Time.deltaTime / 2000;
		}
		
		engine.render();
	}
	
</script>

</head> 

<body onload="init();">
	<script>
		setLabels("005. Static particles", "Rendering " + getParticleAmount() + " static particles.<br>Add #Number to the url to change the amount.");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 